import React, { Component } from 'react';
import {
  TweenLite,
  Back,
  TimelineMax,
  Power1,
  Linear
  } from 'gsap/TweenMax';
// import productList from '../imgs/product';


class Shopping extends Component {
  constructor(props) {
    super(props)

    this.state = {
      close: true
    }
  }

  componentDidMount() {
    this.init()
  }

  init() {
    // 获取元素
    const list = document.querySelector('[data-anim=list]')
    const  items = document.querySelectorAll('[data-anim=list-item]')
    const  ripple = document.querySelector('[data-anim=ripple]')
    const  btnBg = document.querySelector('[data-anim=btn-bg]')
    const  btnLabel = document.querySelector('[data-anim=btn-label]')
    const  btnShadow = document.querySelector('[data-anim=btn-shadow]')
    const  frontGroup = document.querySelector('[data-anim=front-group]')
    const  frontWheels = document.querySelectorAll('[data-anim=front-wheel]')
    const  frontWheelBack = document.querySelector('[data-anim=front-wheel-back]')
    const  backWheels = document.querySelectorAll('[data-anim=back-wheel]')
    const  backWheelsBack = document.querySelectorAll('[data-anim=back-wheel-back]')
    const  containerParts = document.querySelectorAll('[data-anim=container-part]')
    const  containerLip = document.querySelector('[data-anim=container-lip]')
    const  container = document.querySelector('[data-anim=container]')
    const  truckBtn = document.querySelector('[data-anim=truck-btn]')
    const  shippedBtn = document.querySelector('[data-anim=btn-shipped]')

    const btnArea = document.querySelector('[data-click=btn]');


    // 事件监听
    btnArea.addEventListener('click', btnHandler);

    // Handlers
    function btnHandler(e) {
      getBtnTl( getClickCoords(e) ).play();
      shipItTl.restart();
    }

    // Animations
    TweenLite.defaultEase = Back.easeOut.config(1);

    function getBtnTl(coords) {
      const btnTl = new TimelineMax({ paused:true });

      btnTl
        .fromTo(btnShadow, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0)
        .to(ripple, 0, { x: coords.x, y:coords.y }, 0)
        .fromTo(ripple, 0.5, { autoAlpha:0.5, scale: 0,}, { autoAlpha:0, scale: 20, transformOrigin: 'center', ease: Power1.easeOut }, 0);

      return btnTl;
    }


    const shipItTl = new TimelineMax({ paused:true, onComplete:reset })
    const listTl = new TimelineMax({ paused:true })
    const truckTl = new TimelineMax({ paused:true })

    shipItTl
      .add( listTl.play(), 0 )
      .add( truckTl.play(), 0.2 );

    listTl
      .to(list, 0.3, { y:-10, ease: Power1.easeInOut}, 0)
      .to(list, 0.05, { y:0, ease: Power1.easeIn}, 0.3)
      .fromTo(items[0], 0.15, { y:0 }, { y:85, ease: Linear.easeNone }, 0.35)
      .fromTo(items[1], 0.15, { y:0 }, { y:138, ease: Linear.easeNone }, 0.35)
      .fromTo(items[2], 0.15, { y:0 }, { y:178, ease: Linear.easeNone }, 0.35)
      .fromTo(items, 0, { autoAlpha:1 }, { autoAlpha:0 }, 0.5)
      .to([btnBg, btnLabel], 0.15, { scaleX: 1.05, transformOrigin: 'center', ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5)
      .to([btnBg, btnLabel], 0.15, { scaleY: 0.95, ease:Power1.easeInOut, repeat:1, yoyo:true }, 0.5);


    truckTl
      .set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
      .set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
      .set(frontWheels[1], { autoAlpha:0 })
      .set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
      .set([containerParts,containerLip], { y:-15, autoAlpha:1 })
      .set(containerParts[2], { autoAlpha:0.5 })
      .set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
      .to(container, 0.5, { scale:1 }, 0)
      .staggerTo(containerParts, 0.5, { y:0 }, -0.1, 0.2)
      .to(containerLip, 0.5, { y:0 }, 0.6)
      .staggerTo(backWheelsBack, 0.5, { y:0 }, -0.1, 0.55)
      .staggerTo(backWheels, 0.5, { y:0 }, 0.1, 0.6)
      .to(frontGroup, 0.6, { scale:1, x:0, ease: Back.easeOut.config(1.4) }, 0.7)
      .to(frontWheelBack, 0.5, { y:0 }, 0.8)
      .to(frontWheels, 0.5, { y:0, ease:Back.easeOut.config(5.4) }, 0.9)
      .to(frontWheels[1], 0, { autoAlpha:1 }, 1.05)
      .to(shippedBtn, 0, { autoAlpha:1 }, 1.05)
      .fromTo(truckBtn, 1.2, { x:0 }, { x:'+=1000', ease: Back.easeIn.config(0.5) }, 1.4)
      .fromTo(truckBtn, 0.5, { autoAlpha:1 }, { autoAlpha:0, ease: Power1.easeIn }, 2);

    function reset() {

      const	resetTl = new TimelineMax({ paused:true });

      resetTl
        .set(items, { y:0 })
        .set(truckBtn, { x:0 })
        .set(frontGroup, { x:-50, scale:0.84, transformOrigin: 'left top', autoAlpha:1 })
        .set([frontWheels, frontWheelBack], { y:-25, autoAlpha:1 })
        .set(frontWheels[1], { autoAlpha:0 })
        .set(container, { scale:0.98, transformOrigin: 'right top', autoAlpha:1 })
        .set([containerParts,containerLip], { y:-15, autoAlpha:1 })
        .set(containerParts[2], { autoAlpha:0.5 })
        .set([backWheels, backWheelsBack], { y:-30, autoAlpha:1 })
        .to(items, 0.5, { autoAlpha:1, y:0, ease: Power1.easeInOut }, 0.01)
        .to(truckBtn, 0.5, { autoAlpha:1, ease: Power1.easeInOut }, 0.01);

      resetTl.restart();
    };

    // Functions
    function getClickCoords(e) {

      const svgRect = document.querySelector('#ship-it').getBoundingClientRect()
      const btnRect = document.querySelector('[data-anim=btn-bg]').getBoundingClientRect()
      const pixelCoordSample = btnRect.left-svgRect.left
      const svgCoordSample = 88
      const normFactor = pixelCoordSample/svgCoordSample
      const src = {
          x: e.clientX,
          y: e.clientY,
          xMin: btnRect.left,
          xMax: btnRect.left + btnRect.width,
          yMin: btnRect.top,
          yMax: btnRect.top + btnRect.height
        }
      const rpl = {
          xMin: -(btnRect.width)/2/normFactor,
          xMax: (btnRect.width)/2/normFactor,
          yMin: -(btnRect.height)/2/normFactor,
          yMax: (btnRect.height)/2/normFactor,
          offset: parseInt(ripple.getAttribute('r')),
        }

      const coords = {
        x: map(src.x, src.xMin, src.xMax, rpl.xMin, rpl.xMax) + rpl.offset,
        y: map(src.y, src.yMin, src.yMax, rpl.yMin, rpl.yMax) + rpl.offset
      };

      return coords;
    }

// Returns a value on destination range based on the input value on source range
    function map(value, sourceMin, sourceMax, destinationMin, destinationMax) {
      return destinationMin + (destinationMax - destinationMin) * ((value - sourceMin) / (sourceMax - sourceMin)) || 0;
    }
  }


  render() {
    return (
      <div className="product-box">
        <div className="product-list">
          <svg id='ship-it' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" xmlnsXlink="http://www.w3.org/1999/xlink">
            <defs>
              <mask id='btn-mask'>
                <use fill="#FFFFFF" xlinkHref="#path-1"/>
              </mask>
              <rect id="path-1" width="219" height="60" rx="8"/>
              <filter id="filter-2" width="106.8%" height="125%" x="-3.4%" y="-7.5%" filterUnits="objectBoundingBox">
                <feOffset dy="3" in="SourceAlpha" result="shadowOffsetOuter1"/>
                <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
                <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0" in="shadowBlurOuter1"/>
              </filter>
            </defs>
            <g id="Page-1" fill="none" fillRule="evenodd">
              <g id="truck">
                <g id="truck-shipping">
                  <g data-anim="list">
                    <path data-anim="list-bg" fill="#FFFFFF" d="M96.16 46.1h202.86v202.85H96.16z"/>

                    <g data-anim="list-item">
                      <g transform="translate(104.59 193.5)">
                        <rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
                        <g id="carrot">
                          <path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
                          <path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
                        </g>
                        <g id="item-info" stroke="#989BAF" strokeLinecap="round" strokeLinejoin="round">
                          <path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
                          <path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
                        </g>
                      </g>
                    </g>
                    <g data-anim="list-item">
                      <g transform="translate(104.59 143.5)">
                        <rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
                        <g id="carrot">
                          <path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
                          <path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
                        </g>
                        <g id="item-info" stroke="#989BAF" strokeLinecap="round" strokeLinejoin="round">
                          <path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
                          <path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
                        </g>
                      </g>
                    </g>
                    <g data-anim="list-item">
                      <g transform="translate(104.59 93.5)">
                        <rect id="bg" width="185" height="46" x=".7" y=".63" fill="#F4F6F8" rx="8"/>
                        <g id="carrot">
                          <path id="Combined-Shape" fill="#52C1BC" d="M21.98 22.33c.75.5 1.26.78 1.26.78l.66-1.3-1.87-1.4s.6-2.03-.28-3.36c-.9-1.32-1.92-.96-3.23-1.1.66-1.48-1.5-2.24-1.5-2.24s.76-2.8-1.52-2.57c-2.28.23-.87 4.8 1.45 7.24.87.92 1.97 1.8 3 2.58-1.23.1-2.62.26-3.82.57-3.02.8-5.74 5.4-4.06 6.7 2.2 1.67 2.33-2.1 2.33-2.1s3.3 1.4 3.3-1.5c.85.43 1.3.62 2.65 0 1.35-.62.77-2.2.77-2.2l.86-.1z"/>
                          <path id="Combined-Shape" fill="#FFC14C" d="M36.8 25.58c-.74-.64-1.63-1.44-2.72-2.43-.63 1.43-1.62 2.9-1.62 2.9-.12.2-.36.25-.56.15-.2-.1-.23-.32-.1-.5 0 0 .87-.92 1.67-3.1-.5-.48-1.07-.98-1.66-1.53-.35-.33-.7-.62-1.03-.88-.14.64-.34 1.38-.6 2-.68 1.56-2.23 3.5-2.23 3.5-.14.17-.4.2-.57.1-.2-.12-.2-.34-.06-.5 0 0 1.1-.98 2.15-3.43.36-.84.6-1.55.73-2.12-3.9-2.75-5.17.12-7.1 2.63-2.2 2.82-1.08 6.4 4.75 9.38 5.83 2.96 12.55.24 13.8-.7 1.23-.94-.83-2.5-1.8-3.05-.48-.27-1.2-.82-2.5-1.94-.48.88-.94 1.57-.94 1.57-.13.18-.38.24-.57.14-.2-.1-.23-.32-.1-.5 0 0 .48-.5 1.06-1.7z"/>
                        </g>
                        <g id="item-info" stroke="#989BAF" strokeLinecap="round" strokeLinejoin="round">
                          <path id="Path-4" d="M54.43 32.4s7.25-.28 18.28-.2c11.04.07 17.18.38 20.3.47 3.1.1 4.9.53 16.5 0 11.58-.52 6.46-.67 11.88-.73 5.42-.07 9.2.34 13.3.42l11.54-.4"/>
                          <path id="Path-2" d="M54.44 23.26s2.98 1.62 6.8-.88c3.84-2.5 7.67-8.7 5.58-8.7-2.54 0-3 3.38-3 3.38s-.98 5.9 2.6 6.25c8.43.82 9.16-8.74 12.9-7.7 3.7 1.06-1.47 5.78 1.8 7.1 3.25 1.33 5.87-5.45 8.4-5.2 2.53.23-.1 2.96 2.15 3.43 2.25.47 2.72-1.9 4.85-1.53 2.14.37-.54 2.34 2.77 1.94 3.3-.4 8.26-1.65 8.26-1.65"/>
                        </g>
                      </g>
                    </g>
                  </g>
                  <g data-anim="btn-shipped" transform="translate(93.09 271.165)" className='hidden'>
                    <rect id="btn-fill" width="205.88" height="56.4" x="1.56" y="1.8" fill="#4EB7B2" rx="8"/>
                    <path id="btn-dash" fill="#44A29E" fillRule="nonzero" d="M3.06 9.8c0 .82-.67 1.5-1.5 1.5S.06 10.6.06 9.8c0-2.9 1.3-5.55 3.47-7.34.64-.53 1.58-.44 2.1.2.54.64.44 1.6-.2 2.1C3.93 6 3.06 7.83 3.06 9.8zm8.02-6.5h7c.83 0 1.5-.67 1.5-1.5S18.9.3 18.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S32.9.3 32.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S46.9.3 46.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S60.9.3 60.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S74.9.3 74.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5S88.9.3 88.08.3h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h7c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm14 0h6.35c.18 0 .35 0 .53.02.83.07 1.55-.55 1.6-1.38.08-.82-.53-1.55-1.36-1.6-.26-.03-.5-.04-.77-.04h-6.35c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5zm11.7 2.8c.75 1.07 1.16 2.35 1.16 3.7v2.15c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V9.8c0-1.97-.6-3.84-1.7-5.42-.47-.68-1.4-.84-2.08-.37-.68.48-.85 1.42-.38 2.1zm1.16 12.85v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm0 14v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm0 14v3.26c0 1.05-.25 2.06-.7 2.97-.4.73-.1 1.64.64 2 .74.4 1.64.1 2.02-.64.68-1.32 1.04-2.8 1.04-4.32v-3.25c0-.82-.67-1.5-1.5-1.5s-1.5.68-1.5 1.5zm-5.14 9.6c-.44.1-.9.15-1.37.15h-5.25c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h5.25c.68 0 1.35-.07 2-.2.8-.18 1.33-.98 1.15-1.8-.17-.8-.97-1.3-1.78-1.14zm-13.62.15h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-14 0h-7c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5h7c.82 0 1.5-.67 1.5-1.5s-.68-1.5-1.5-1.5zm-13.04-.97C4.5 54.7 3.37 53 3.12 51.07c-.1-.82-.86-1.4-1.7-1.3-.8.12-1.38.87-1.28 1.7.38 2.82 2 5.3 4.4 6.8.72.44 1.64.22 2.08-.48.44-.7.22-1.64-.48-2.07zM3.06 44.3v-7c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5zm0-14v-7c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5zm0-14c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5V9.8c0-.84.67-1.5 1.5-1.5s1.5.66 1.5 1.5v6.5z"/>
                    <path id="label" fill="#309490" d="M51.47 32.62c0-.42-.15-.76-.45-1-.3-.23-.83-.48-1.6-.73-.75-.27-1.37-.5-1.85-.75-1.57-.77-2.35-1.83-2.35-3.17 0-.67.2-1.26.6-1.77.38-.5.93-.9 1.64-1.2.72-.27 1.52-.42 2.4-.42.88 0 1.66.16 2.35.47.7.3 1.23.75 1.6 1.32.4.57.6 1.23.6 1.97h-2.92c0-.5-.15-.88-.45-1.15-.3-.28-.7-.42-1.23-.42-.52 0-.93.12-1.23.35-.3.23-.45.52-.45.87 0 .3.16.6.5.85.33.25.9.5 1.75.78.83.26 1.52.55 2.06.86 1.3.75 1.96 1.78 1.96 3.1 0 1.06-.4 1.9-1.2 2.5-.8.6-1.9.9-3.3.9-.97 0-1.85-.17-2.65-.53-.8-.35-1.4-.83-1.8-1.44-.4-.6-.6-1.32-.6-2.1h2.93c0 .63.17 1.1.5 1.42.34.3.88.46 1.63.46.5 0 .87-.1 1.15-.3.28-.2.42-.5.42-.88zm18.5 3.22H67.1V30.8h-4.3v5.04h-2.92v-12.1h2.9v4.8h4.3v-4.8H70v12.1zm8.96 0h-2.9v-12.1h2.9v12.1zm8.94-4.1v4.1h-2.92v-12.1h4.83c.92 0 1.74.18 2.45.52.7.34 1.26.82 1.65 1.45.4.64.6 1.35.6 2.15 0 1.18-.43 2.12-1.28 2.83-.84.7-2 1.05-3.47 1.05h-1.86zm0-2.25h1.9c.57 0 1-.16 1.3-.44.3-.28.44-.68.44-1.2 0-.56-.14-1-.44-1.35-.3-.32-.72-.5-1.25-.5h-1.93v3.5zm15.06 2.23v4.1h-2.9V23.76h4.8c.94 0 1.75.17 2.47.5.7.35 1.26.83 1.65 1.46.4.64.58 1.35.58 2.15 0 1.18-.42 2.12-1.26 2.83-.85.7-2 1.05-3.48 1.05h-1.87zm0-2.24h1.9c.58 0 1-.16 1.3-.44.3-.28.45-.68.45-1.2 0-.56-.15-1-.46-1.35-.3-.32-.72-.5-1.24-.5h-1.95v3.5zm19.65 1.2H118v2.9h5.4v2.24h-8.32v-12.1h8.35V26H118v2.55h4.58v2.16zm6.02 5.14v-12.1h3.9c1.06 0 2.02.25 2.87.74.85.48 1.52 1.16 2 2.05.48.88.72 1.87.72 2.96v.55c0 1.1-.24 2.1-.7 2.98-.48.87-1.13 1.56-1.98 2.05-.85.5-1.8.75-2.85.76h-3.97zm2.9-9.84v7.6h1.02c.84 0 1.48-.3 1.93-.9.45-.6.67-1.48.67-2.65v-.52c0-1.17-.22-2.05-.67-2.64-.45-.6-1.1-.9-1.96-.9h-1z"/>
                    <path id="check" stroke="#319490" strokeWidth="3" d="M153.47 28.46L157.8 35l8.56-13.13" opacity=".7" strokeLinecap="round" strokeLinejoin="round"/>
                  </g>
                  <g data-anim="truck-btn">
                    <g id="truck">
                      <g id="wheels">
                        <g data-anim="back-wheel-back" className='hidden'>
                          <g fill="#3B454F" transform="translate(135 326)">
                            <circle id="wheel-part-12" cx="16.91" cy="17.31" r="16.43"/>
                          </g>
                        </g>
                        <g data-anim="back-wheel-back" className='hidden'>
                          <g fill="#3B454F" transform="translate(96 326)">
                            <circle id="wheel-part-11" cx="16.91" cy="17.31" r="16.43"/>
                          </g>
                        </g>
                        <g data-anim="back-wheel" className='hidden'>
                          <g transform="translate(115.982 328.368)">
                            <circle id="wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
                            <circle id="wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
                            <circle id="wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
                            <path id="wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
                            <path id="wheel-part-1" fill="#3B454F" d="M2.5 16.93c0-3.45 1.07-6.65 2.9-9.3h27.06c1.82 2.65 2.9 5.85 2.9 9.3H2.5z" opacity=".3"/>
                          </g>
                        </g>
                        <g data-anim="back-wheel" className='hidden'>
                          <g transform="translate(154.982 328.368)">
                            <circle id="wheel-part-10" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
                            <circle id="wheel-part-9" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
                            <circle id="wheel-part-8" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
                            <path id="wheel-part-7" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
                            <path id="wheel-part-6" fill="#3B454F" d="M2.5 16.93c0-3.45 1.07-6.65 2.9-9.3h27.06c1.82 2.65 2.9 5.85 2.9 9.3H2.5z" opacity=".3"/>
                          </g>
                        </g>
                      </g>
                      <g data-anim="front-group" className='hidden'>
                        <g transform="translate(293 281)">
                          <g data-anim="front-wheel-back" className='hidden'>
                            <circle cx="16.91" cy="62.31" r="16.43" fill="#3B454F"/>
                          </g>
                          <g data-anim="front-wheel" className='hidden'>
                            <g transform="translate(19.982 47.368)">
                              <circle id="front-wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
                              <circle id="front-wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
                              <circle id="front-wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
                              <path id="front-wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
                              <path id="front-wheel-part-1" fill="#485E69" d="M18.93.5c6.42 0 12 3.7 14.7 9.08.66 1.35-1.42-4-14.7-4-13.3 0-15.46 5.6-14.87 4.36C6.7 4.37 12.36.5 18.93.5z"/>
                            </g>
                          </g>
                          <g id="front-base">
                            <path id="base-back" fill="#36474F" d="M10 2c0-1.1.9-2 2-2h23.5C49.58 0 61 11.4 61 25.5V52c0 4.42-3.6 8-8 8H12c-1.1 0-2-.9-2-2V2z"/>
                            <path id="base-front" fill="#FFC14C" d="M17 2c0-1.1.9-2 2-2h23.56C56.6 0 68 11.4 68 25.45V42.9c0 4.42-3.6 8-8 8H19c-1.1 0-2-.9-2-2V2z"/>
                            <g id="window">
                              <path id="window-piece-4" fill="#A2DCED" d="M23 5.95h22.12c5.13 0 9.92 2.33 11.97 4.76C62.87 17.57 62 27 62 27H23V5.95z"/>
                              <path id="window-piece-3" fill="#7ED0ED" d="M52.48 7.5c2 .9 3.62 2.04 4.6 3.2C62.9 17.57 62 27 62 27H23S50.34 6.57 52.48 7.5z"/>
                              <path id="window-piece-2" fill="#468698" d="M61.72 21.45L62 27H23v-5.55z" opacity=".42"/>
                              <path id="window-piece-1" stroke="#FFC14C" d="M19.26 3.3h16.86c4.6 0 9.4 2.52 11.56 5.7 1.16 1.7 2.1 3.62 2.83 5.7 1.7 4.77 2.2 9.74 2.03 13.8H19.5V3.3h-.24z" opacity=".5"/>
                            </g>
                            <path id="patch" fill="#FFC14C" d="M20 4h11.34v26H20z"/>
                            <path id="detail" stroke="#FBB638" d="M28.7.3v47.37h3.9v-18.1h28.8V46.3"/>
                            <g id="bumber">
                              <path id="bumper-detail-3" fill="#8DA3AE" d="M64.68 47c0-1.1-.9-2-2-2H19c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h39.67c3.32 0 6-2.7 6-6v-4z"/>
                              <path id="bumper-detail-2" fill="#36474F" d="M17 45h47.68v6.3c0 1.66-1.35 3-3 3H17V45z" opacity=".3"/>
                              <path id="bumper-detail-1" fill="#CFD7DC" d="M69.68 47c0-1.1-.9-2-2-2h-20.3s-4.86-2.18-9.52-2.18C33.2 42.82 28.9 45 28.9 45H18c-1.1 0-2 .9-2 2v3c0 1.1.9 2 2 2h47.1c2.52 0 4.58-2.06 4.58-4.6V47z"/>
                            </g>
                            <path id="front-wheel-shadow" fill="#728691" d="M55.02 57H20.8c2.6-6.9 9.28-11.83 17.1-11.83 7.83 0 14.5 4.92 17.12 11.83z"/>
                          </g>
                          <g data-anim="front-wheel" className='hidden'>
                            <g transform="translate(19.982 47.368)">
                              <circle id="front-wheel-part-5" cx="16.93" cy="16.94" r="16.43" fill="#3B454F"/>
                              <circle id="front-wheel-part-4" cx="18.93" cy="16.94" r="16.43" fill="#516F7A"/>
                              <circle id="front-wheel-part-3" cx="18.93" cy="16.94" r="10.07" fill="#CFD7DC"/>
                              <path id="front-wheel-part-2" fill="#8DA3AE" d="M12.48 24.68c-2.22-1.85-3.63-4.63-3.63-7.74 0-3.1 1.4-5.9 3.63-7.74.94-.37 1.96-.57 3.04-.57 4.6 0 8.3 3.72 8.3 8.3 0 4.6-3.7 8.32-8.3 8.32-1.08 0-2.1-.2-3.04-.57z"/>
                              <path id="front-wheel-part-1" fill="#485E69" d="M18.93.5c6.42 0 12 3.7 14.7 9.08.66 1.35-1.42-4-14.7-4-13.3 0-15.46 5.6-14.87 4.36C6.7 4.37 12.36.5 18.93.5z"/>
                            </g>
                          </g>
                        </g>
                      </g>
                      <g data-anim="container" className='hidden'>
                        <path data-anim="container-part" className='hidden' fill="#36474F" d="M91 329h216v12H91z"/>
                        <path data-anim="container-part" className='hidden' fill="#8DA3AE" d="M89 326h218v7c0 2.76-2.23 5-5 5H94c-2.76 0-5-2.23-5-5v-7z"/>
                        <path data-anim="container-lip" className='hidden' fill="#CFD7DC" d="M89 329h11.16v11c0 1.66-1.35 3-3 3H92c-1.66 0-3-1.34-3-3v-11z"/>
                        <path data-anim="container-part" className='hidden' fill="#36474F" d="M89 326h217.96l.07 9.3H89z" opacity=".3"/>
                        <path fill="#ECAC34" d="M83.9 281c0-4.42 3.57-8.02 8-8.04l207.1-.92c4.42-.02 8 3.55 8 7.97v45c0 4.42-3.57 8-8 8H91.9c-4.42 0-8-3.57-8-8v-44z"/>
                      </g>
                    </g>
                    <g id="btn" transform="translate(88.09 271.165)">
                      <g id="btn-fill">
                        <use data-anim='btn-shadow' filter="url(#filter-2)" xlinkHref="#path-1"/>
                        <use data-anim='btn-bg' fill="#FFC14C" xlinkHref="#path-1"/>
                      </g>
                      <g mask='url(#btn-mask)'>
                        <circle data-anim="ripple" className='hidden' cx="109.5" cy="30" r="10" fill="#E8A933" transform="matrix(1 0 0 1 219 0)"/>
                      </g>
                      <path data-anim="btn-label" fill="#FFFFFF" d="M73.34 32.62c0-.42-.15-.76-.46-1-.3-.23-.83-.48-1.6-.73-.74-.27-1.36-.5-1.84-.75-1.57-.77-2.35-1.83-2.35-3.17 0-.67.18-1.26.57-1.77.4-.5.94-.9 1.66-1.2.7-.27 1.5-.42 2.4-.42.87 0 1.65.16 2.34.47.7.3 1.23.75 1.6 1.32.4.57.58 1.23.58 1.97h-2.9c0-.5-.16-.88-.46-1.15-.3-.28-.72-.42-1.23-.42-.52 0-.93.12-1.23.35-.3.23-.46.52-.46.87 0 .3.17.6.5.85.33.25.92.5 1.75.78.84.26 1.52.55 2.06.86 1.3.75 1.95 1.78 1.95 3.1 0 1.06-.4 1.9-1.2 2.5-.8.6-1.88.9-3.27.9-.98 0-1.87-.17-2.66-.53-.8-.35-1.4-.83-1.8-1.44-.4-.6-.6-1.32-.6-2.1h2.92c0 .63.17 1.1.5 1.42.34.3.88.46 1.64.46.48 0 .86-.1 1.14-.3.28-.2.42-.5.42-.88zm18.5 3.22h-2.9V30.8h-4.28v5.04h-2.92v-12.1h2.92v4.8h4.3v-4.8h2.9v12.1zm8.95 0h-2.9v-12.1h2.9v12.1zm8.93-4.1v4.1h-2.9v-12.1h4.8c.94 0 1.75.18 2.46.52.7.34 1.26.82 1.65 1.45.4.64.58 1.35.58 2.15 0 1.18-.42 2.12-1.26 2.83-.85.7-2 1.05-3.48 1.05h-1.87zm0-2.25h1.9c.58 0 1-.16 1.3-.44.3-.28.45-.68.45-1.2 0-.56-.16-1-.46-1.35-.3-.32-.72-.5-1.24-.5h-1.95v3.5zm23.5 6.34h-2.9v-12.1h2.9v12.1zM148.48 26h-3.63v9.84h-2.92V26h-3.56v-2.25h10.1V26z"/>
                    </g>
                  </g>

                </g>
                <g transform="translate(88.09 271.165)">
                  <use data-click='btn' fill="#FFF" xlinkHref="#path-1" className='clickable'/>
                </g>
              </g>
            </g>
          </svg>
          <span className="title">SHOPPING LIST</span>
        </div>
      </div>
    );
  }
}

export default Shopping;
